// COLOR VARIABLES
$color-primary: #c69963;
$color-primary-dark: #B28451;

$color-secondary: #101d2c;

$color-grey-light-1: #f9f7f6;
$color-grey-light-2: #aaa;

$color-grey-dark-1: #54483A;
$color-grey-dark-2: #6D5D4B;

// FONT VARIABLES
$font-primary: 'Nunito', sans-serif;
$font-display: 'Josefin Sans', sans-serif;

//RESPONSIVE BREAKPOINTS
$bp-largest:75em; // 1280px
$bp-large:62.5em; // 1000px
$bp-medium:50em; // 800px
$bp-small:37.5em; // 600px

*,*::before,*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html{
  box-sizing: border-box;
  font-size: 62.5%; // 10px/16px=62.5% => 1rem = 10px

  @media only screen and (max-width:$bp-largest) {
    font-size: 50%;
  }
}
body{
  font-family: $font-primary;
  color: $color-grey-dark-1;
  font-weight: 300;
  line-height: 1.6;
}

.container{
  display: grid;
  grid-template-rows: 80vh min-content 40vw repeat(3,min-content);
  grid-template-columns:[sidebar-start] 8rem [sidebar-end full-start]
                        minmax(6rem,1fr) [center-start]
                        repeat(8,[col-start] minmax(min-content,14rem) [col-end]) [center-end]
                        minmax(6rem,1fr) [full-end];


  @media only screen and (max-width:$bp-large) {
    font-size: 50%;

    grid-template-rows:6rem 80vh min-content 40vw repeat(3,min-content);
    grid-template-columns:[full-start]
                        minmax(6rem,1fr) [center-start]
                        repeat(8,[col-start] minmax(min-content,14rem) [col-end]) [center-end]
                        minmax(6rem,1fr) [full-end];

  }

  @media only screen and (max-width:$bp-medium) {
    grid-template-rows:6rem calc(100vh - 6rem) min-content min-content min-content repeat(3,min-content);
  }
}